import React from 'react'
import PropTypes from 'prop-types'
import {Table} from 'antd'
import {Link} from 'react-router-dom'
import {getCustomerLink} from 'utils/tabs'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import {toMessageType} from 'utils'

const List = ({location, dispatch, isMotion, ...tableProps}) => {

  const columns = [
    {
      title: '微信号',
      dataIndex: 'dcustomerWxId',
      key: 'dcustomerWxId',
      render: (_, record) => getCustomerLink({
        cid: record.customerId || _,
        owxId: record.belongWxId,
        name: record.customerNickname || record.customerRemark || _,
        val: _,
      }, dispatch),
    },
    {
      title: '昵称',
      dataIndex: 'customerNickname',
      key: 'customerNickname',
    },
    {
      title: '聊天时间',
      dataIndex: 'chatTime',
      key: 'chatTime',
    },
    {
      title: '消息分类',
      dataIndex: 'msgType',
      key: 'msgType',
      render: val => val ? toMessageType(val) : '未知类型',
    },
    {
      title: '聊天内容',
      dataIndex: 'chatContent',
      key: 'chatContent',
    },
    {
      title: '查看聊天记录',
      dataIndex: 'operation',
      key: 'operation',
      render: () => <Link to={''}>详情</Link>,
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      columns={columns}
      simple
      rowKey={record => record.id}
      components={{
        body: {wrapper: isMotion ? AnimateBody : CommonBody},
      }}
    />
  )
}

List.propTypes = {
  location: PropTypes.object,
}

export default List
